<template>
  <a-modal
           :title="title"
           :width="800"
           :visible="visible"
           :confirmLoading="confirmLoading"
           @ok="handleOk"
           @cancel="handleCancel"
           :okButtonProps="{ props: { disabled: disableSubmit } }"
           cancelText="关闭">
    <a-form-item label="结算截图" :labelCol="labelCol" :wrapperCol="wrapperCol">
      <a-upload
        listType="picture-card"
        class="avatar-uploader"
        :showUploadList="false"
        :action="uploadAction"
        :data="{'isup':1}"
        :headers="headers"
        :beforeUpload="beforeUpload"
        @change="handleChange"
        :disabled="disableSubmit"
      >
        <img v-if="record.closeImg" :src="getView()" alt="结算截图" style="height:200px;max-width:400px"/>
        <div v-else>
          <a-icon :type="uploadLoading ? 'loading' : 'plus'" />
          <div class="ant-upload-text">上传</div>
        </div>
      </a-upload>
    </a-form-item>
  </a-modal>
</template>
<script>
import Vue from "vue";
import {ACCESS_TOKEN} from "@/store/mutation-types";
import {httpAction} from "@api/manage";

export default {
  name: "UploadImgByOrder",
  data () {
    return {
      title:'上传结算截图',
      ImageSrc:'',
      visible:false,
      record:{},
      confirmLoading: false,
      uploadLoading:false,
      disableSubmit:false,
      headers:'',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      url:{
        fileUpload: window._CONFIG['domianURL']+"/sys/common/upload",
        imgerver: window._CONFIG['domianURL']+"/sys/common/view",
        edit: "/orderForm/orderForm/edit",
      }
    }
  },
  created () {
    const token = Vue.ls.get(ACCESS_TOKEN);
    this.headers = {"X-Access-Token":token}

  },
  computed:{
    uploadAction:function () {
      return this.url.fileUpload;
    }
  },
  methods: {
    edit(record){
      this.record= record;
    },
    getView(){
      return this.url.imgerver +"/"+ this.record.closeImg;
    },
    handleChange (info) {
      if (info.file.status === 'uploading') {
        this.uploadLoading = true
        return
      }
      if (info.file.status === 'done') {
        var response = info.file.response;
        this.uploadLoading = false;
        console.log(response);
        if(response.success){
          this.record.closeImg = response.message;
        }else{
          this.$message.warning(response.message);
        }
      }
    },
    beforeUpload: function(file){
      var fileType = file.type;
      if(fileType.indexOf('image')<0){
        this.$message.warning('请上传图片');
        return false;
      }
      //TODO 验证文件大小
    },
    handleOk () {
      if(this.record.closeImg==null){
        return  that.$message.warning('请上传截图');
      }
      const that = this;
      // 触发表单验证
          that.confirmLoading = true;
          let httpurl = '';
          let method = '';
          httpurl+=this.url.edit;
          method = 'put';
          let formData = this.record
          console.log("formData-->",formData);
          httpAction(httpurl,formData,method).then((res)=>{
            if(res.success){
              that.$message.success(res.message);
              that.$emit('ok');
            }else{
              that.$message.warning(res.message);
            }
          }).finally(() => {
            that.confirmLoading = false;
            that.handleCancel();
          })
    },
    handleCancel() {
      this.$emit('ok');
      this.visible = false;
    },
  }
}
</script>

<style scoped>
.avatar-uploader > .ant-upload {
  width:104px;
  height:104px;
}
</style>